<template>
    <component :is="LayoutComponents[layout]" />
    <ThemeDrawer />
</template>

<script setup lang='ts'>
import { computed, onMounted, type Component } from "vue";
import { LayoutType } from "@/stores/interface";
import { useGlobalStore } from "@/stores/modules/global";
import ThemeDrawer from "./components/ThemeDrawer/index.vue";
import LayoutVertical from "./LayoutVertical/index.vue";
import SignalRService from '@/utils/signalr.ts';
import { ElNotification } from "element-plus";

// 创建 SignalR 服务实例
const signalR = new SignalRService();
const LayoutComponents: Record<LayoutType, Component> = {
    vertical: LayoutVertical
};
const globalStore = useGlobalStore();
const layout = computed(() => globalStore.layout);
// 组件创建时初始化 SignalR 配置
onMounted(() => {
    signalR.initSignalR('signalr/chatHub');
    // 注册消息接收的回调函数
    signalR.onMessageReceived((flag, message) => {
        console.log(message);
        ElNotification({
            title: flag == 1 ? "上线提醒" : "离线提醒",
            dangerouslyUseHTMLString: true,
            message: message,
            type: flag == 1 ? "success" : "error",
            duration: 10000
        });
    });
});
</script>

<style lang='scss' scoped></style>